<template>
  <div class="outmain ba_f">
    <div class="shuju_title mar_b20">
      <div class="shuju_title_text">
        <span>账户明细</span>
      </div>
    </div>
    <div class="pad_b_30 orderSeatch">
      <el-form :inline="false" :model="formInline" class="demo-form-inline" label-width="100px">
        <template>
          <el-form-item label="账单类型：">
            <el-radio-group v-model="formInline.type" @change="selectType">
              <el-radio-button label="0">全部</el-radio-button>
              <el-radio-button label="1">外卖店内入账订单</el-radio-button>
              <el-radio-button label="2">买单订单入账</el-radio-button>
              <el-radio-button label="3">服务费扣除</el-radio-button>
              <el-radio-button label="4">提现申请</el-radio-button>
              <el-radio-button label="5">其他变动</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </template>
        <el-form-item label="查询日期：" class="mar_t20">
          <div class="flex-bet">
            <div>
              <span class="">
                <el-date-picker v-model="formInline.time" type="daterange" range-separator="至" start-placeholder="开始日期"
                                end-placeholder="结束日期" format="yyyy年MM月dd日" @change="selectType"></el-date-picker>
              </span>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="outmain ba_f">
      <el-table
          :data="list"
          stripe
          style="width: 100%"
          class="tablecenter">
        <el-table-column
            prop="createdAt"
            label="时间"
        >
        </el-table-column>
        <el-table-column
            prop="outTradeNo"
            label="订单号"
        >
        </el-table-column>
        <el-table-column
            prop="item"
            label="类型"
        >
          <template slot-scope="scope">
            <div class="flex flex-center">
              <!--            <div v-if="scope.row.note=='1'" class="txsq"><el-tag size="mini" type="success">外卖店内入账</el-tag></div>-->
              <!--            <div v-if="scope.row.note=='2'" class="txsq"><el-tag size="mini" type="danger">提现申请</el-tag></div>-->
              <div class="txsq" v-if="scope.row.item=='2'">
                <el-tag size="mini" type="danger">{{ scope.row.note }}</el-tag>
              </div>
              <div class="txsq" v-if="scope.row.item=='1'">
                <el-tag size="mini" type="success">{{ scope.row.note }}</el-tag>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            prop="money"
            label="收入/支出"
        >
          <template slot-scope="scope">
            <div class="flex flex-center">
              <div v-if="scope.row.item=='2'" class="color-red wei">-{{ scope.row.money }}元</div>
              <div v-if="scope.row.item=='1'" class="color-green wei">+{{ scope.row.money }}元</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            prop="currentMoney"
            label="账户余额"
        >
          <template slot-scope="scope">
            <div class="flex flex-center wei">
              {{ scope.row.currentMoney }}元
            </div>
          </template>
        </el-table-column>
        <el-table-column
            prop="origin"
            label="账单类型"
        >
          <template slot-scope="scope">
            <div class="flex flex-center">
              <div v-if="scope.row.origin=='1'">外卖</div>
              <div v-if="scope.row.origin=='2'">店内</div>
              <div v-if="scope.row.origin=='3'">快餐</div>
              <div v-if="scope.row.origin=='4'">当面付</div>
              <div v-if="scope.row.origin=='5'">券包</div>
              <div v-if="scope.row.origin=='6'">提现</div>
              <div v-if="scope.row.origin=='7'">提现拒绝</div>
              <div v-if="scope.row.origin=='8'">扣除服务费</div>
            </div>
          </template>
        </el-table-column>
        <!--      <el-table-column-->
        <!--              prop="cz"-->
        <!--              label="操作"-->
        <!--      >-->
        <!--        <template slot-scope="scope">-->
        <!--          <div class="flex flex-center">-->
        <!--            <el-button type="text" @click="goodRecovery(scope.row)">查看</el-button>-->
        <!--          </div>-->
        <!--        </template>-->
        <!--      </el-table-column>-->
      </el-table>
      <el-pagination
          background
          layout="prev, pager, next"
          :total="page.total"
          :page-size="page.size"
          :current-page.sync='page.currentPage'
          @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import {storeBillList,} from '@/api/statistics';
import {changeDate} from "@/utils";
import {mapState} from "vuex";

export default {
  created() {
    // if (this.$route.query.storeId) {
    //   this.storeId = this.$route.query.storeId;
    //   this.init();
    // }
    this.init();
  },
  computed: {
    ...mapState(['storeId'])
  },
  data() {
    return {
      formInline: {
        time: [new Date().setDate(new Date().getDate() - 15), new Date()],
        type: '0',
      },
      tableData: [
        {
          sj: '2021-04-27 11:16',
          ddh: '20158296255554655',
          lx: '1',
          srzc: '1',
          zhye: '15.00',
        },
        {
          sj: '2021-04-27 11:16',
          ddh: '20158296255554655',
          lx: '2',
          srzc: '2',
          zhye: '25.00',
        },
      ],
      list: [],
      listLoading: false,
      selectRows: "",
      elementLoadingText: "正在加载...",
      page: {
        total: 0,
        size: 20,
        currentPage: 1,
      },
    }
  },
  methods: {
    async init() {
      var params = {
        page: this.page.currentPage,
        startTime: this.formInline.time ? changeDate(this.formInline.time[0]).substring(0, 10) : '',
        endTime: this.formInline.time ? changeDate(this.formInline.time[1]).substring(0, 10) : '',
        type: this.formInline.type,
        storeId: this.storeId,
      };
      const {data, count} = await storeBillList(params);
      this.list = data;
      this.page.total = count;
      this.bus.$emit('loading', false);
    },
    selectType() {
      this.init();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.init();
    },
  },
}
</script>
